﻿<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据查看-<%=gAppTitle%></title>
    <link rel="shortcut icon" href="/images/favicon.png">
    <link rel='stylesheet' href='/stylesheets/bootstrap.min.css' />
    <style type="text/css">
    	div{
    		/*border:1px solid red;*/
    	}
    </style>
    <script type="text/javascript">
    	function goNext10(idx,pagesize,totalcount){
    		var pos = Math.ceil(idx/10)-1;
     		var page = (pos+1)*10+1;
    		if(page>Math.ceil(totalcount/gPageSize))return false;
     		goPage(page);
     		return false;
    	}
    	
    	function goPrev10(idx,pagesize,pagesize){
    		var pos = Math.ceil(idx/10)-1;
    		var page = (pos-1)*10+1;
    		if(page<0)return;
    		goPage(page);
    		return false;
   		}
   		function goPage(idx,curridx,pagesize,totalcount){
   			if(idx==curridx)return false;
   			if(isNaN(idx) || idx<=0 || idx>Math.ceil(totalcount/pagesize)) {
   				alert("指定数值超过边界。");
   				return false;
   			}
   			$('#pageindex').val(idx);
   			$('#pageform')[0].submit();
   			return false;
   		}
    </script>
  </head>
  <body>
	
	<div class="container">	
		
	<div class="text-right">
		<a href="/logout" class="btn btn-default">退出</a>
		<a href="/month" class="btn btn-default">按月统计</a>
		<a href="/stat" class="btn btn-default">分类统计</a>
		<a href="/record" class="btn btn-default">记账</a>
	</div>
	<h3 class="text-info text-center">记账信息详情</h3>
	<form class="navbar-form navbar-right" method="post" id="pageform">
		<!--span>每页记录数：<%=gPageSize%>，当前页：<%=pageindex%>，总记录数：<%=count%></span-->
		<input type="hidden" name="pageindex" id="pageindex" value="1"/>
		<div class="btn-group btn-group-sm">
			<a href="javascript:void(0);" class="btn btn-default" onclick="goPrev10(<%=pageindex%>,<%=gPageSize%>,<%=count%>);">&laquo;</a>
			<% var start=Math.ceil(pageindex/10-1)*10,i; for (i=start+1; i<=start+10; i++){ if(i>Math.ceil(count/gPageSize))break;%>
			<a href="javascript:void(0);" class="btn <%=(i==pageindex?'btn-primary':'btn-default')%>" onclick="goPage(this.innerText,<%=pageindex%>,<%=gPageSize%>,<%=count%>);"><%=i%></a>
			<%}%>
			<a href="javascript:void(0);" class="btn btn-default" onclick="goNext10(<%=pageindex%>,<%=gPageSize%>,<%=count%>);" >&raquo;</a>
		</div>
		<!--div class="form-group" style="width:8em;">
			<div class="input-group input-group-xs">
				<input type="text" name="gopage" id="gopage" class="form-control" />
				<span class="input-group-btn">
				<button class="btn btn-default" type="button" title="跳转" onclick="goPage($('#gopage').val(),<%=pageindex%>,<%=gPageSize%>,<%=count%>);"><span class="glyphicon glyphicon-send"></span></button>
				</span>
			</div>
		</div-->
	</form>
	<table class="table table-striped table-bordered table-condensed"> 
		<thead>
			<tr>
				<th style="width:7em;" class="text-center">日期</th>
				<th class="text-center">科目</th>
				<th class="text-center">金额(元)</th>
				<th class="text-center">备注</th>
			</tr>	
		</thead>
		<tbody>
		<%
			consumes.forEach(function(consume, index) { 
		%> 
			<tr>
				<td><%= consume.consumeDate %></td> 
				<td><%= consume.consumeSubject %></td> 
				<td><%= consume.consumeAmount %></td> 
				<td><%= consume.consumeRemark %></td> 
			</tr>
		<%}) %> 
		</tbody>
	</table>
	</div><!--end of container-->

	<script type="text/javascript" src='/javascripts/jquery-1.11.0.min.js'></script>
	<script type="text/javascript" src='/javascripts/bootstrap.min.js'></script>

 </body>
</html>